<template>
  <div>
    <div class="share-icon" >
      <!-- @click="handleClickShare" -->
      <div class="icon" @click="handleClickShare">
        <wx-button open-type="share" class="icon-btn">
          <img src="https://img.wifenxiao.com/h5-wfx/images/community/share.png" alt="">
        </wx-button>
      </div>
    </div>

  </div>
</template>

<script>
import Vue from 'vue'
import small from '@/smallapp/small'
import { mpShare } from '@/utils/utils'
  /**
	 * @Author: yqe@360shop.cn
	 * @Date: 2019-10-10 16:48:09
	 * @Last Modified by: yqe@360shop.cn
	 * @Last Modified time: 2019-10-10 16:48:09
	 */
  export default Vue.extend({
    name: 'index',
    props: {
      videoItem: {
        type: Object
      },
      shareType: {
        type: String
      }
    },
    data() {
      return {
        detailId: '',
        shareTitle: '',
        shareImg: '',
        sharePath: '',
        mpRoute: '',
        defaultArticle: 'https://img.wifenxiao.com/h5-wfx/images/community/noArticle.png'
      }
    },
    watch: {
      shareType: function(val) {
        this.dealShareData()
      }
    },
    mounted() {
      this.dealShareData()
      window.addEventListener('wxshow', () => {
        if (!small.checkLogin()) {
          this.$refs.smalllogin.openSmallLoginPop()
        }
      })
    },
    methods: {
      /**
       * 处理分享的数据
       */
      dealShareData() {
        if (this.shareType === 'videoDetail') { // 视频列表处的分享
          this.detailId = this.videoItem.video_id
          this.shareImg = this.videoItem.video_cover_url
          this.shareTitle = this.videoItem.title
          this.sharePath = '/goodsOrder/pages/videoDetail/index'
          this.mpRoute = '/video-detail'
        } else if (this.shareType === 'articleDetail') { // 文章列表处的分享
          this.detailId = this.videoItem.community_id
          this.shareTitle = this.videoItem.title
          this.shareImg = this.videoItem.file_path || this.defaultArticle
          this.sharePath = '/goodsOrder/pages/articleDetail/index'
          this.mpRoute = '/article-detail'
        } else if (this.shareType === 'zhiboPreheat') { // 欧普照明直播预热活动分享
          this.detailId = this.videoItem.preheat_id
          this.shareImg = this.videoItem.preheat_img
          this.sharePath = this.$route.path
        } else if (this.shareType === 'jdGoods') { // 东阿阿胶优惠券分享
          this.detailId = this.$route.query.detailId
          this.shareImg = this.videoItem.img
          this.sharePath = this.$route.path
        } else {
          this.detailId = this.$route.query.detailId
          this.shareImg = this.defaultArticle
          this.sharePath = this.$route.path
        }
        const sid = small.globalData.shopId
        const pid = small.wxCache('global_login_info') ? small.wxCache('global_login_info').uid : '0'
        const option = {
          title: this.shareTitle,
          imgUrl: this.shareImg, // 分享图标
          shareParam: `sid=${sid}&pid=${pid}&detailId=${this.detailId}`,
        }
        mpShare (true, false, this.sharePath, option, this.mpRoute)
      
      },
      /**
       * 拼接分享的链接
       */
      splitUrl() {
        this.dealShareData()
        const host = window.location.host
        const href = window.location.href
        const http = href.substring(0, 5) === 'https' ? 'https://' : 'http://'
        if (!this.$route.query.pid || this.$route.query.pid == 'underfind') {
          const url = `${http}${host}${this.sharePath}?detailId=${this.detailId}&sid=${this.$route.query.sid}`
          return url
        } else {
          const url = `${http}${host}${this.sharePath}?detailId=${this.detailId}&sid=${this.$route.query.sid}&pid=${this.$route.query.pid}`
          return url
        }
      },
      /**
       * 分享按钮的点击事件
       */
      handleClickShare() {
        // this.$emit('openShareShade', this.videoItem)
        const sid = small.globalData.shopId
        const pid = small.wxCache('global_login_info') ? small.wxCache('global_login_info').uid : '0'
        const option = {
          title: this.shareTitle,
          imgUrl: this.shareImg, // 分享图标
          shareParam: `sid=${sid}&pid=${pid}&detailId=${this.detailId}`,
        }
        mpShare (true, false, this.sharePath, option, this.mpRoute)
      }
    }
  })
</script>

<style lang="scss">
  .share-icon{
    display: inline-block;
    .icon{
      width: 36px;
      .icon-btn{
        background: transparent;
      }
      img{
        width: 100%;
      }
    }
  }
</style>
